<template>
  <div class="function-update-modal">
    <je-modal
      v-model:visible="isShow"
      width="460px"
      height="auto"
      :resize="false"
      :maximizable="false"
      title="编辑"
      cancel-button
      :ok-button="onSubmit"
      @close="onCancel"
    >
      <je-form layout="vertical" :model="formState" :colon="false" autocomplete="off">
        <je-form-item label="编码">
          <je-input v-model:value="formState.FUNCINFO_OLD_FUNCCODE" disabled placeholder="">
          </je-input>
        </je-form-item>
        <je-form-item label="新编码" v-bind="validateInfos.FUNCINFO_FUNCCODE">
          <je-input v-model:value="formState.FUNCINFO_FUNCCODE" placeholder=""> </je-input>
        </je-form-item>
        <span class="annotation"
          >注释：功能编码为特殊字段，修改编码存在风险，需要您同步修改前端事件JS和后台代码中使用该功能的编码，请慎重修改！</span
        >
      </je-form>
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent, reactive } from 'vue';
  import { Input, Modal, Form } from '@jecloud/ui';
  import { UpdateTableItemFunction } from '@/api/index';
  const useForm = Form.useForm;
  export default defineComponent({
    name: 'ModalUpdate',
    components: {
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeModal: Modal,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      record: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeModal', 'changeFunctionCode'],
    setup(props, { emit }) {
      const formState = reactive({
        FUNCINFO_OLD_FUNCCODE: props.record.FUNCINFO_FUNCCODE,
        FUNCINFO_FUNCCODE: props.record.FUNCINFO_FUNCCODE,
      });
      const recordData = reactive(props.record);
      const isShow = ref(props.visble);
      const validateFUNCINFO_FUNCCODE = () => {
        if (formState.FUNCINFO_FUNCCODE == formState.FUNCINFO_OLD_FUNCCODE) {
          return Promise.reject("Two inputs don't match!");
        } else {
          return Promise.resolve();
        }
      };
      const rulesRef = {
        FUNCINFO_FUNCCODE: [
          {
            required: true,
            message: '该输入项为必填项',
          },
          {
            max: 40,
            message: '不能大于40个字符',
          },
          {
            validator: validateFUNCINFO_FUNCCODE,
            message: '新编码不能和原编码一致',
            trigger: 'change',
          },
          {
            pattern: '^[A-Z]{1}[A-Z_0-9]{0,100}$',
            message: '编码由大写字母、下划线、数字组成,且首位为字母',
          },
        ],
      };
      const { validateInfos, validate } = useForm(formState, rulesRef, {
        onValidate: (...args) => console.log(...args),
      });
      const methods = {
        // 点击确定
        onSubmit({ $modal, button }) {
          const modal = $modal,
            btn = button;
          btn.loading = true;
          validate()
            .then(() => {
              const params = {
                tableCode: 'JE_CORE_FUNCINFO',
                FUNCINFO_FUNCCODE: formState.FUNCINFO_FUNCCODE,
                JE_CORE_FUNCINFO_ID: props.record.JE_CORE_FUNCINFO_ID,
              };
              UpdateTableItemFunction(params)
                .then((res) => {
                  btn.loading = false;
                  Modal.message(res.message, 'success');
                  modal.close();
                  // 1刷新列表
                  emit('changeFunctionCode', formState.FUNCINFO_FUNCCODE);
                  methods.onCancel();
                })
                .catch((err) => {
                  btn.loading = false;
                  Modal.alert(err.message, 'error');
                });
            })
            .catch((err) => {
              btn.loading = false;
              console.log('err', err);
            });
          return false;
        },
        onCancel() {
          isShow.value = false;
          emit('changeModal', isShow.value);
          console.log('Cancel');
        },
      };

      return {
        formState,
        rulesRef,
        ...methods,
        validateInfos,
        recordData,
        isShow,
      };
    },
  });
</script>
<style lang="less" scoped>
  .function-update-modal {
    width: 100%;
    height: 100%;
    overflow: scroll;
    .header {
      display: flex;
      justify-content: space-between;
    }
    .annotation {
      color: #aaaaaa;
      line-height: 28px;
      font-size: 14px;
      font-weight: Italic;
      display: inline-block;
      font-style: oblique;
      text-align: justify;
      padding: 0 3px 20px 0;
    }
  }
</style>
